<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">

	<ui:define name="content">


		<h1 class="title ui-widget-header ui-corner-all">SelectOneMenu</h1>
		<div class="entry">
			<p>SelectOneMenu extends standard SelectOneMenu with skinning capabilities, effects and custom content display.</p>

            <h:form>

                <h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">

                    <h:outputText value="Basic Usage: " />
                    <p:selectOneMenu value="#{buttonBean.number}">
                        <f:selectItem itemLabel="Select One" itemValue="" />
                        <f:selectItem itemLabel="Option 1" itemValue="1" />
                        <f:selectItem itemLabel="Option 2" itemValue="2" />
                        <f:selectItem itemLabel="Option 3" itemValue="3" />
                    </p:selectOneMenu>

                    <h:outputText value="Custom Effect: " />
                    <p:selectOneMenu value="#{pprBean.city}" effect="drop">
                        <f:selectItem itemLabel="Select One" itemValue="" />
                        <f:selectItems value="#{pprBean.cities}" />
                    </p:selectOneMenu>

                    <h:outputText value="Pojo: " />
                    <p:selectOneMenu value="#{autoCompleteBean.selectedPlayer1}" effect="fade" converter="player">
                        <f:selectItem itemLabel="Select One" itemValue="" />
                        <f:selectItems value="#{autoCompleteBean.players}" var="player" itemLabel="#{player.name}" itemValue="#{player}"/>
                    </p:selectOneMenu>

                    <h:outputText value="Custom Content:" />
                    <p:selectOneMenu value="#{autoCompleteBean.selectedPlayer2}" converter="player"
                                     effect="fade" var="p">
                        <f:selectItem itemLabel="Select One" itemValue="" />
                        <f:selectItems value="#{autoCompleteBean.players}" var="player" itemLabel="#{player.name}" itemValue="#{player}"/>

                        <p:column>
                            <p:graphicImage value="/images/barca/#{p.photo}" width="40" height="50"/>
                        </p:column>

                        <p:column>
                            #{p.name} - #{p.number}
                        </p:column>
                    </p:selectOneMenu>

                </h:panelGrid>

                <p:commandButton value="Submit" update="display" oncomplete="dlg.show()" />

                <p:dialog header="Selected Values" modal="true" showEffect="fade" hideEffect="fade" widgetVar="dlg">
                    <h:panelGrid columns="1" id="display">
                        <h:outputText value="Value 1: #{buttonBean.number}" />

                        <h:outputText value="Value 2: #{pprBean.city}" />

                        <h:outputText value="Value 3: #{autoCompleteBean.selectedPlayer1.name}" rendered="#{not empty autoCompleteBean.selectedPlayer1}" />

                        <h:outputText value="Value 4: #{autoCompleteBean.selectedPlayer2.name}" rendered="#{not empty autoCompleteBean.selectedPlayer2}" />
                    </h:panelGrid>
                </p:dialog>

            </h:form>

			<h3>Source</h3>
			<p:tabView>
				<p:tab title="selectOneMenu.xhtml">
					<pre name="code" class="xml">
&lt;h:form&gt;

    &lt;h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5"&gt;

        &lt;h:outputText value="Basic Usage: " /&gt;
        &lt;p:selectOneMenu value="\#{buttonBean.number}"&gt;
            &lt;f:selectItem itemLabel="Select One" itemValue="" /&gt;
            &lt;f:selectItem itemLabel="Option 1" itemValue="1" /&gt;
            &lt;f:selectItem itemLabel="Option 2" itemValue="2" /&gt;
            &lt;f:selectItem itemLabel="Option 3" itemValue="3" /&gt;
        &lt;/p:selectOneMenu&gt;

        &lt;h:outputText value="Custom Effect: " /&gt;
        &lt;p:selectOneMenu value="\#{pprBean.city}" effect="drop"&gt;
            &lt;f:selectItem itemLabel="Select One" itemValue="" /&gt;
            &lt;f:selectItems value="\#{pprBean.cities}" /&gt;
        &lt;/p:selectOneMenu&gt;

        &lt;h:outputText value="Pojo: " /&gt;
        &lt;p:selectOneMenu value="\#{autoCompleteBean.selectedPlayer1}" effect="fade" converter="player"&gt;
            &lt;f:selectItem itemLabel="Select One" itemValue="" /&gt;
            &lt;f:selectItems value="\#{autoCompleteBean.players}" var="player" itemLabel="\#{player.name}" itemValue="\#{player}"/&gt;
        &lt;/p:selectOneMenu&gt;

        &lt;h:outputText value="Custom Content:" /&gt;
        &lt;p:selectOneMenu value="\#{autoCompleteBean.selectedPlayer2}" converter="player"
                         effect="fade" var="p"&gt;
            &lt;f:selectItem itemLabel="Select One" itemValue="" /&gt;
            &lt;f:selectItems value="\#{autoCompleteBean.players}" var="player" itemLabel="\#{player.name}" itemValue="\#{player}"/&gt;

            &lt;p:column&gt;
                &lt;p:graphicImage value="/images/barca/\#{p.photo}" width="40" height="50"/&gt;
            &lt;/p:column&gt;

            &lt;p:column&gt;
                \#{p.name} - \#{p.number}
            &lt;/p:column&gt;
        &lt;/p:selectOneMenu&gt;

    &lt;/h:panelGrid&gt;

    &lt;p:commandButton value="Submit" update="display" oncomplete="dlg.show()" /&gt;

    &lt;p:dialog header="Selected Values" modal="true" showEffect="fade" hideEffect="fade" widgetVar="dlg"&gt;
        &lt;h:panelGrid columns="1" id="display"&gt;
            &lt;h:outputText value="Value 1: \#{buttonBean.number}" /&gt;

            &lt;h:outputText value="Value 2: \#{pprBean.city}" /&gt;

            &lt;h:outputText value="Value 3: \#{autoCompleteBean.selectedPlayer1.name}" rendered="\#{not empty autoCompleteBean.selectedPlayer1}" /&gt;

            &lt;h:outputText value="Value 4: \#{autoCompleteBean.selectedPlayer2.name}" rendered="\#{not empty autoCompleteBean.selectedPlayer2}" /&gt;
        &lt;/h:panelGrid&gt;
    &lt;/p:dialog&gt;

&lt;/h:form&gt;
					</pre>
				</p:tab>
			</p:tabView>

		</div>

	</ui:define>
</ui:composition>